<template>
	<view>
		<!-- f1:面包屑 -->
		<uni-card isFull class="bread">
			<text @click="navTobrands">品牌馆</text>
			<text>></text>
			<text>{{product.lname}}</text>
		</uni-card>
		<!-- f2:轮播图 -->
		<view class="swiper-box">
			<swiper indicator-dots autoplay :interval="3000" :duration="1000" indicator-active-color="#0aa1ed" circular>
				<swiper-item v-for="s in product.picList" :key="s.pid">
					<view class="swiper-item">
						<image :src="$url.base + s.md" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- f3:主标题+副标题 -->
		<view class="title">
			<view class="title1">
				{{product.title}}
			</view>
			<view class="title2">
				{{product.subtitle}}
			</view>
		</view>
		<!-- f4:售价+承诺 -->
		<view class="f4">
			<view class="price">
				<text>学员售价：￥{{product.price}}</text>
			</view>
			<view class="promise">
				<text>服务承诺：{{product.promise}}</text>
			</view>
		</view>
		<!-- f5:客服+规格+数量 -->
		<view class="f5">
			<view class="servie">
				<text>客服：联系客服</text>
			</view>
			<view class="laptop">
				<text>规格：</text>
				<view class="button">
					<text class="laptop-button" v-for="(l,i) in family.laptopList" :key="l.lid" size="mini" >{{l.spec}}</text>
				</view>
			</view>
			<view class="num">
				<text>数量：</text>
				<text class="num1">-</text>
				<text class="num1">{{num}}</text>
				<text class="num1">+</text>
			</view>
		</view>
		<!-- f6:按钮 -->
		<view class="f6">
			<button type="default" size="mini">立即购买</button>
			<button type="default" size="mini" style="background-color: #007dfe;color: #fff;margin: 0 5px;">加入购物车</button>
			<button type="default" size="mini" style="background-color: #007dfe;color: #fff;">收藏</button>
		</view>
		<!-- f7:为您推荐 -->
		<uni-card title="为您推荐" is-full>
			<!-- 水平滚动的视图容器 -->
			<scroll-view scroll-x="true">
				<view class="suggest-list" :style="{width:250*suggestList.length+'rpx'}">
					<view class="suggest" style="width:300rpx;" v-for="(c,i) in suggestList" :key="c.lid">
						<image :src="$url.base + c.pic" mode="widthFix"></image>
						<text class="lname">{{c.lname}}</text>
					</view>
				</view>
			</scroll-view>
		</uni-card>
		<!-- f8:商品详情 -->
		<uni-card title="商品详情" is-full>
			<view>
				<rich-text :nodes="product.details"></rich-text>
			</view>
		</uni-card>
		<!-- f9:返回顶部 -->
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				family: {}, // 商品型号信息
				product: {}, //商品详情
				suggestList: [ //推荐的商品
					{
						lid: 10,
						lname: 'ThinkPad New S2超霸',
						pic: 'img/product_detail/product_detail_1.png'
					},
					{
						lid: 11,
						lname: '戴尔 DELL燃7000',
						pic: 'img/product_detail/product_detail_2.png'
					},
					{
						lid: 12,
						lname: '戴尔 DELL魔方15MF',
						pic: 'img/product_detail/product_detail_3.png'
					},
					{
						lid: 13,
						lname: '联想 YOGA900多彩版',
						pic: 'img/product_detail/product_detail_4.png'
					},
				],
			};
		},
		methods: {
			navTobrands() {
				uni.switchTab({
					url: "../brands/brands"

				})
			}
		},
		onLoad(data) {
			// 页面加载时可以读取到上一页传递的参数
			// console.log(data)
			// 页面加载时，异步请求服务器端首页数据
			let pid = data.pid
			if (!pid) {
				uni.navigateTo({
					url: "../product-list/product-list"
				})
			}
			let url = this.$url.productDetails + '?lid=' + pid
			console.log(url);
			uni.showLoading({
				title: '内容加载中...',
			})
			uni.request({
				url,
				success: res => {
					// console.log(res.data)
					this.family = res.data.family
					this.product = res.data.product
					// 处理商品详情数据，把所有的src=img替换为src=“http://www.codeboy.com:9999/img”
					this.product.details = this.product.details.replace(/src="img/gi,
						`src="${this.$url.base}img`)
					// 处理商品详情数据，把所有的<img  替换为  <img style="width:100%"
					this.product.details = this.product.details.replace(/<img/gi, `<img style="width:100%;"`)
					// 根据商品名称修改状态栏标题
					uni.setNavigationBarTitle({
						title: this.product.lname
					})
				},
				fail: err => {
					console.log(err)
				},
				complete: () => {
					uni.hideLoading()
				}
			})

		}
	}
</script>

<style lang="scss">
	.bread {
		padding: 10px 0;

		text {
			font-size: $uni-font-size-sm;
			margin-right: 5px;
		}
	}

	.swiper-box {
		padding: 0;

		swiper {
			border-radius: 10rpx;
			overflow: hidden;
			height: 750rpx; //根据图片的宽高等比例计算得来的

			image {
				width: 100%; //710rpx
			}
		}
	}

	.title {
		padding: 0 20rpx;
		background-color: #fff;

		.title1 {
			padding: 20rpx 0;
		}

		.title2 {
			color: $uni-text-color-grey;
			font-size: $uni-font-size-sm;
			padding: 0 0 20rpx 0;
		}
	}

	.f4 {
		padding: 20rpx;
		font-size: $uni-font-size-sm + 1;
		color: $uni-text-color;
		background-color: $uni-bg-color-grey;

		text {
			line-height: 20px;
		}
	}

	.f5 {
		background-color: #fff;
		padding: 20rpx;

		.laptop {
			display: flex;
			
			text{
				line-height: 50px;
			}
			
			.button {
				margin-top: 15px;
				.laptop-button {
					display: block;
					background-color: #fff;
					border:1px solid #000;
					font-size: $uni-font-size-sm;
					line-height: 20px;
					padding: 0 10px;
					margin-bottom: 5px;
					border-radius: $uni-border-radius-lg;
					
					&:active{
						color: $xz-theme;
						border: .5px solid $xz-theme;
					}
				}
			}
		}

		.num {
			margin-top: 10px;

			.num1 {
				background-color: $uni-bg-color-grey;
				padding: 5px 10px;
				margin-right: 1px;
				border-radius: 5px;
			}
		}
	}

.f6{
	padding: 10px;
	background-color: #fff;
	
}

	.suggest-list {
		display: flex;

		.suggest {
			width: 250rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 98%;
			}

			.lname {
				font-size: $uni-font-size-sm;
				white-space: nowrap;
				transform: scale(0.8);
			}
		}
	}

	.details {
		width: 100%;
	}
</style>
